<template>
	<el-container>
		<el-header height="72px" style="border-bottom: 1px solid #dddddd;">
			<el-row justify="space-between" class="pg-header">
				<div class="logo">
					<router-link to="/admin/menu"><img src="../assets/logo.png" /></router-link>
				</div>

				<div>
					<!-- 下拉框 -->
					<el-dropdown>
						<span class="el-dropdown-link" style="cursor:pointer">
							武沛齐
							<el-icon class="el-icon--right"><ArrowDown /></el-icon>
						</span>
						<template #dropdown>
							<el-dropdown-menu>
								<el-dropdown-item>个人资料</el-dropdown-item>
								<el-dropdown-item>注销</el-dropdown-item>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
				</div>
			</el-row>
		</el-header>
	</el-container>

	<div class="main">
		<el-container style="height: 100%;">
			<!-- 左侧菜单 -->
			<el-aside width="200px">
				<el-scrollbar>
					<el-menu :router="true" :default-active="activeRouter">
						<!-- 一级菜单 -->
						<el-sub-menu v-for="item in menuList" :index="item.title" :key="item.title">
							<template #title>
								<el-icon><component :is="item.icon"></component></el-icon>
								<span>{{ item.title }}</span>
							</template>
							<!-- 二级菜单 -->
							<el-menu-item v-for="ele in item.children" :index="ele.name" :key="ele.id" :route="{ name: ele.name }">{{ ele.title }}</el-menu-item>
						</el-sub-menu>
					</el-menu>
				</el-scrollbar>
			</el-aside>

			<el-main class="body"><router-view></router-view></el-main>
		</el-container>
	</div>
</template>

<script setup>
import { useStore } from 'vuex';
import { useRoute } from 'vue-router';
import { computed } from 'vue';
const route = useRoute();
const store = useStore();
const activeRouter = computed(() => route.name);
const menuList = computed(() => store.getters.menus);
</script>

<!-- scoped样式只对当前组件生效 -->
<style scoped>
img {
	height: 100%;
}
.pg-header {
	height: 72px;
	align-items: center;
}
.pg-header .logo {
	height: 48px;
}
.pg-header .menu a {
	padding: 8 5px;
	text-decoration: none;
}
.main {
	height: cals(100vh-72px);
}
.el-menu {
	height: cals(100vh-72px);
}
.body {
	min-width: 900px;
	/* border-left: 1px solid #dddddd; */
}

/* .el-aside {
	border-right: 1px solid #dddddd;
} */
</style>
